import React, { Component } from "react";
import { Button } from "antd";
import { CloseSquareOutlined, CheckOutlined } from '@ant-design/icons';
import { connect, useSelector, useDispatch } from "react-redux";
import * as actionCreator from './store/actionCreator';
import './index.css';

const Remind = () => {
    const dispatch = useDispatch();
    const roomList = useSelector((state) => {
        return state.app.roomList
    });
    const bellList = useSelector((state) => {
        return state.app.bellList
    });
    const bellClose = () => {
        const action = actionCreator.closeBell();
        dispatch(action);
    }
    const getReaded = (id) => {
        const action = actionCreator.getReaded(id);
        dispatch(action);
    }
    return (
        <div className="remind-container">
            <Button
                className="remind-close-button"
                icon={<CloseSquareOutlined className="remind-close-icon" />}
                onClick={bellClose}
            >
            </Button>
            <div className="remind-list-container">
                {bellList.map((item, index) => {
                    return (
                        <div className="remind-list-item" key={item.id}>
                            <span className="remind-list-item-name">姓名:{item.name}</span>
                            <span className="remind-list-item-phone">电话:{item.phone}</span>
                            <span className="remind-list-item-time">剩余时长:{item.time}</span>
                            {!item.isRead ? <Button
                                className="remind-list-item-check-button"
                                icon={<CheckOutlined className="remind-list-item-check-icon" />}
                                onClick={() => getReaded(index)}
                            >
                            </Button> : <Button
                                className="remind-list-item-check-button"
                                icon={<CheckOutlined className="remind-list-item-check-icon" />}
                                disabled
                            ></Button>}
                        </div>
                    )
                })}
            </div>
        </div>
    )
}

// class Remind extends Component{
//     constructor(props){
//         super(props);
//     }
//     componentWillUnmount(nextProps,nextState){
//         if(nextProps!=this.props || nextState!=this.state){
//             return true;
//         }else{
//             return false;
//         }
//     }
//     shouldComponentUpdate(nextProps,nextState){
//         if(nextProps!=this.props || nextState!=this.state){
//             return true;
//         }else{
//             return false;
//         }
//     }
//     render(){
//         return(
//             <div className="remind-container">
//                 <Button
//                     className="remind-close-button"
//                     icon={<CloseSquareOutlined className="remind-close-icon" />}
//                     onClick={this.props.bellClose}
//                 >
//                 </Button>
//                 <div className="remind-list-container">
//                     {this.props.bellList.map((item,index)=>{
//                         return(
//                             <div className="remind-list-item" key={item.id}>
//                                 <span className="remind-list-item-name">姓名:{item.name}</span>
//                                 <span className="remind-list-item-phone">电话:{item.phone}</span>
//                                 <span className="remind-list-item-time">剩余时长:{item.time}</span>
//                                 {!item.isRead?<Button
//                                     className="remind-list-item-check-button"
//                                     icon={<CheckOutlined className="remind-list-item-check-icon"/>}
//                                     onClick={()=>this.props.getReaded(index)}
//                                 >
//                                 </Button>:<Button
//                                     className="remind-list-item-check-button"
//                                     icon={<CheckOutlined className="remind-list-item-check-icon"/>}
//                                     disabled
//                                 ></Button>}
//                             </div>
//                         )
//                     })}
//                 </div>
//             </div>
//         )       
//     }
// }
const mapStateToProps = (state) => ({
    roomList: state.app.roomList,
    bellList: state.app.bellList
})
const mapDispatchToProps = (dispatch)=>({
    bellClose(){
        const action = actionCreator.closeBell();
        dispatch(action);
    },
    getReaded(id){
        const action = actionCreator.getReaded(id);
        dispatch(action);
    }
})
export default connect(mapStateToProps, mapDispatchToProps)(Remind);